<template>
  <div>
     <div class="message-list" v-for="(item,index) in chatList"  @click="goToDetail(item.id)" >
          <div class="avatar-wrapper">
            <img :src="item.img" />
          </div>
          <div class="content-list">
            <div class="message-wrapper">
              <span class="name">{{item.name}}</span>
              <span class="time">{{item.time}}</span>
            </div>
            <div>{{item.message}}</div>
          </div>
     </div>
  </div>
</template>

<script>
  import { Swiper, SwiperItem, ToastPlugin } from 'vux'
  import { login } from "@/api/user"
  import { getShare } from "@/api/share"

  export default {
    components: {
      Swiper,
      SwiperItem
    },
    data() {
      return {
      chatList:[{
        id:1,
        img:require("../static/img/people.png"),
        name:"祖教",
        time:"19：00",
       message:"家长宁浩"
      }]
      }

    },
    created() {

    },
    methods: {
      goToDetail(id){
        this.$router.push({path:`/discussion/detail?id=${id}`})
      }
    }
  }

</script>

<style>
body{
}
.message-list{
  position: relative;
  display: flex;
  background: white;
  padding:10px 15px;
}

.message-list::after{
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 1px solid #eee;
}
.message-wrapper{
  position: relative;
  margin-top: 6px;
}
.message-list .avatar-wrapper{
  position: relative;
  flex: 0 0 100px;
  margin-right: 10px;
}

.message-list  .content-list{
  position: relative;
  flex: auto;
}

.message-list  .content-list .name{
  position: relative;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.message-list  .content-list .time{
  position: relative;
  top: 6px;
  float: right;
  font-size: 12px;
  margin-bottom: 10px;
}

</style>
